<template>
  <el-card shadow="never">
    <template v-slot:header>
      <div class="header-wrapper">
        <div class="title-wrapper" @click.stop="$emit('openDrugModal')">
          <div class="chart-title">昨日药品/耗材</div>
        </div>
        <div class="radio-wrapper">
          <el-radio-group v-model="radioSelect" size="mini" @change="onCategoryChange">
            <el-radio-button label="药品"></el-radio-button>
            <el-radio-button label="耗材"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </template>
    <template>
      <div class="consumable-chart" @click="$emit('shwDeviceNum', 4)">
        <v-chart v-if="radioSelect === '药品'" :options="drugChartOptions"></v-chart>
        <v-chart v-else :options="consumableChartOptions"></v-chart>
      </div>
    </template>
  </el-card>
</template>

<script>
export default {
  components: {},
  props: {
    drugChartData: {
      type: Array,
      default() {
        return {}
      }
    },
    consumableChartData: {
      type: Array,
      default() {
        return {}
      }
    },
    radioSelected: {
      type: String,
      default: '药品'
    }
  },
  data() {
    return {
      radioSelect: '药品'
    }
  },
  computed: {
    selected() {
      // this.radioSelect = this.radioSelected
      return this.radioSelect
    },
    drugChartOptions() {
      let res = this.drugChartData
      if (res && res.length) {
        const _data = {
          xData: [],
          yData: [],
          res: []
        }
        res = res
          // .filter(item => item.sumDose < 1000)
          .map(item => {
            _data.xData.push(item.platformMedicineName)
            _data.yData.push({
              value: item.sumDose,
              desc: item
            })
            _data.res.push(item)
          })

        return {
          xAxis: {
            type: 'category',
            data: _data.xData,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#D1D1D1',
                width: 0.5 // 这里是为了突出显示加上的
              }
            },
            axisLabel: {
              interval: 0,
              rotate: 30,
              textStyle: {
                color: '#333',
                fontSize: 12
              }
            }
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#999',
                fontSize: 12
              }
            },
            nameTextStyle: {
              color: '#8998AC',
              padding: [0, 25, 0, 0]
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: '#f4f5f8' // 'rgb(245,245,245)' x轴网络线颜色
              }
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: v => {
              return `${v.data.desc.platformMedicineName}:<br/> ${v.data.desc.doseUnit}`
            }
          },
          grid: {
            top: '20px',
            bottom: '65px',
            left: '50px',
            right: '0'
          },
          series: [
            {
              data: _data.yData,
              type: 'bar',
              showBackground: false,
              barWidth: 26,
              // backgroundStyle: {
              //   color: 'rgba(220, 220, 220, 0.8)'
              // }
              itemStyle: {
                normal: {
                  color(params) {
                    const colors = ['#ee6666', '#5470c6', '#fac858', '#91cc75', '#37A1DA', '#31C5E9']
                    return colors[params.dataIndex]
                  }
                }
              }
            }
          ]
        }
      }
      return null
    },
    consumableChartOptions() {
      let res = this.consumableChartData
      if (res) {
        const _data = {
          xData: [],
          yData: [],
          res: []
        }
        res = res.map(item => {
          _data.xData.push(item.platformMaterial)
          _data.yData.push({
            value: item.sumQty
          })
        })

        return {
          xAxis: {
            type: 'category',
            data: _data.xData,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#D1D1D1',
                width: 0.5 // 这里是为了突出显示加上的
              }
            },
            axisLabel: {
              interval: 0,
              rotate: 30,
              textStyle: {
                color: '#555',
                fontSize: 10
              }
            }
          },
          yAxis: {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#999',
                fontSize: 12
              }
            },
            nameTextStyle: {
              color: '#8998AC'
              // padding: [0, 0, 0, 0]
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: v => {
              console.log(v)
              return `${v.name}:<br/>  ${v.value}次`
            }
          },
          grid: {
            top: '20px',
            bottom: '65px',
            left: '60px',
            right: '20px'
          },
          series: [
            {
              data: _data.yData,
              type: 'bar',
              showBackground: false,
              barWidth: 26,
              // backgroundStyle: {
              //   color: 'rgba(220, 220, 220, 0.8)'
              // }
              itemStyle: {
                normal: {
                  color(params) {
                    const colors = ['#F14C4C', '#3B74E6', '#F18F1C', '#54A95D', '#37A1DA', '#31C5E9']
                    return colors[params.dataIndex]
                  }
                }
              }
            }
          ]
        }
      }
      return null
    }
  },
  methods: {
    // 打开药品 耗材二级页面
    // openDrugModal () {
    //   this.$emit('openDrugModal')
    // },
    onCategoryChange(type) {
      this.radioSelect = type
      this.$emit('onCategoryChange', this.radioSelect)
    }
  }
}
</script>
<style lang="scss" scoped>
.header-wrapper {
  display: flex;
  justify-content: space-between;
}
.title-wrapper {
  margin-left: 8px;
}
.consumable-chart {
  height: 200px;
}
</style>
